/* 通用样式文件 - 精致版 */
/* 重置样式 */
* {
  box-sizing: border-box;
}
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #2c3e50;
  line-height: 1.6;
  font-size: 28rpx;
}

/* 布局相关 */
.container {
  padding: 20rpx;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

/* 间距相关 */
.m-10 { margin: 10rpx; }
.m-20 { margin: 20rpx; }
.m-30 { margin: 30rpx; }

.mt-10 { margin-top: 10rpx; }
.mt-20 { margin-top: 20rpx; }
.mt-30 { margin-top: 30rpx; }

.mb-10 { margin-bottom: 10rpx; }
.mb-20 { margin-bottom: 20rpx; }
.mb-30 { margin-bottom: 30rpx; }

.ml-10 { margin-left: 10rpx; }
.ml-20 { margin-left: 20rpx; }
.ml-30 { margin-left: 30rpx; }

.mr-10 { margin-right: 10rpx; }
.mr-20 { margin-right: 20rpx; }
.mr-30 { margin-right: 30rpx; }

.p-10 { padding: 10rpx; }
.p-20 { padding: 20rpx; }
.p-30 { padding: 30rpx; }

.pt-10 { padding-top: 10rpx; }
.pt-20 { padding-top: 20rpx; }
.pt-30 { padding-top: 30rpx; }

.pb-10 { padding-bottom: 10rpx; }
.pb-20 { padding-bottom: 20rpx; }
.pb-30 { padding-bottom: 30rpx; }

.pl-10 { padding-left: 10rpx; }
.pl-20 { padding-left: 20rpx; }
.pl-30 { padding-left: 30rpx; }

.pr-10 { padding-right: 10rpx; }
.pr-20 { padding-right: 20rpx; }
.pr-30 { padding-right: 30rpx; }

/* 文本相关 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: #007AFF; }
.text-secondary { color: #666666; }
.text-muted { color: #999999; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #17a2b8; }
.text-white { color: #ffffff; }
.text-dark { color: #333333; }

.font-12 { font-size: 24rpx; }
.font-14 { font-size: 28rpx; }
.font-16 { font-size: 32rpx; }
.font-18 { font-size: 36rpx; }
.font-20 { font-size: 40rpx; }

.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }

/* 背景相关 */
.bg-white { background-color: #ffffff; }
.bg-primary { background-color: #007AFF; }
.bg-secondary { background-color: #f8f9fa; }
.bg-success { background-color: #28a745; }
.bg-danger { background-color: #dc3545; }
.bg-warning { background-color: #ffc107; }
.bg-info { background-color: #17a2b8; }
.bg-light { background-color: #f8f9fa; }
.bg-dark { background-color: #343a40; }

/* 边框相关 */
.border { border: 1rpx solid #e0e0e0; }
.border-top { border-top: 1rpx solid #e0e0e0; }
.border-bottom { border-bottom: 1rpx solid #e0e0e0; }
.border-left { border-left: 1rpx solid #e0e0e0; }
.border-right { border-right: 1rpx solid #e0e0e0; }

.border-radius { border-radius: 8rpx; }
.border-radius-lg { border-radius: 16rpx; }
.border-radius-xl { border-radius: 24rpx; }
.border-radius-circle { border-radius: 50%; }

/* 阴影相关 - 精致版 */
.shadow-sm { 
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08), 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
}
.shadow { 
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12), 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.shadow-lg { 
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.16), 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
}
.shadow-xl {
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.2), 0 8rpx 32rpx rgba(0, 0, 0, 0.16);
}
.shadow-inner {
  box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 按钮相关 - 精致版 */
.btn {
  padding: 24rpx 48rpx;
  border-radius: 12rpx;
  text-align: center;
  font-size: 28rpx;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  letter-spacing: 0.5rpx;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn:active::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.5);
}

.btn-secondary {
  background-color: #f8f9fa;
  color: #333333;
  border: 1rpx solid #e0e0e0;
}

.btn-secondary:hover {
  background-color: #e2e6ea;
}

.btn-success {
  background-color: #28a745;
  color: #ffffff;
}

.btn-danger {
  background-color: #dc3545;
  color: #ffffff;
}

.btn-warning {
  background-color: #ffc107;
  color: #333333;
}

.btn-info {
  background-color: #17a2b8;
  color: #ffffff;
}

.btn-sm {
  padding: 15rpx 30rpx;
  font-size: 24rpx;
}

.btn-lg {
  padding: 25rpx 50rpx;
  font-size: 32rpx;
}

.btn-block {
  width: 100%;
  display: block;
}

/* 卡片相关 - 精致版 */
.card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12), 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.16), 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
}

.card-header {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.card-body {
  padding: 20rpx 0;
}

.card-footer {
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

/* 列表相关 */
.list-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #ffffff;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-content {
  flex: 1;
}

.list-item-title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.list-item-desc {
  font-size: 24rpx;
  color: #666666;
}

.list-item-arrow {
  font-size: 28rpx;
  color: #cccccc;
}

/* 表单相关 */
.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
  display: block;
}

.form-input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #ffffff;
}

.form-input:focus {
  border-color: #007AFF;
  outline: none;
}

.form-textarea {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #ffffff;
  min-height: 120rpx;
  resize: vertical;
}

/* 工具类 */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }

.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }

/* 动画相关 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式相关 */
/* 新增精致样式类 */
.glass-effect {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.18);
}

.gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-success {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4rpx);
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-hover {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-hover:hover {
  transform: scale(1.05);
}

@media screen and (max-width: 750rpx) {
  .container {
    padding: 15rpx;
  }

  .card {
    padding: 20rpx;
  }

  .btn {
    padding: 15rpx 30rpx;
    font-size: 26rpx;
  }
}

/* ==================== Mars Admin 专用样式 ==================== */

/* 页面容器 */
.ma-page {
  min-height: 100vh;
  background-color: #f5f6fa;
}

.ma-page-content {
  padding-bottom: 30rpx;
}

/* 导航栏样式 */
.ma-navbar-gradient {
  background: linear-gradient(45deg, #2979ff, #007AFF);
}

/* 卡片样式增强 */
.ma-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ma-card-hover:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 列表项样式 */
.ma-list-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.ma-list-item:active {
  background-color: #f8f9fa;
  transform: scale(0.98);
}

/* 状态样式 */
.ma-status-success {
  color: #19be6b;
  background-color: #f0f9ff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
}

.ma-status-warning {
  color: #ff9900;
  background-color: #fff7e6;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
}

.ma-status-error {
  color: #fa3534;
  background-color: #fff2f0;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
}

.ma-status-info {
  color: #909399;
  background-color: #f4f4f5;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
}

/* 徽章样式 */
.ma-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  background-color: #fa3534;
  color: #ffffff;
  font-size: 20rpx;
  border-radius: 16rpx;
  line-height: 1;
}

.ma-badge-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #fa3534;
  border-radius: 50%;
  min-width: auto;
  padding: 0;
}

/* 分割线 */
.ma-divider {
  height: 1rpx;
  background-color: #ebeef5;
  margin: 30rpx 0;
}

.ma-divider-text {
  position: relative;
  text-align: center;
  color: #909399;
  font-size: 24rpx;
  background-color: #f5f6fa;
  padding: 0 20rpx;
}

.ma-divider-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1rpx;
  background-color: #ebeef5;
  z-index: -1;
}

/* 加载状态 */
.ma-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
  color: #909399;
  font-size: 28rpx;
}

.ma-loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #ebeef5;
  border-top-color: #2979ff;
  border-radius: 50%;
  animation: ma-spin 1s linear infinite;
  margin-right: 20rpx;
}

@keyframes ma-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 空状态样式 */
.ma-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 30rpx;
  color: #909399;
}

.ma-empty-icon {
  font-size: 120rpx;
  color: #c0c4cc;
  margin-bottom: 30rpx;
}

.ma-empty-text {
  font-size: 28rpx;
  color: #909399;
}

/* 工具类扩展 */
.ma-safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.ma-safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.ma-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ma-clickable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.ma-clickable:active {
  opacity: 0.7;
  transform: scale(0.98);
}